

// 文本的虚拟节点
function createTextVDom(text){
	return {
		type:"TEXT",
		props:{
			nodeValue:text,
			children:[]
		}
	}
}

// 创建虚拟节点
function createElement(type,props,...children){
	return {
		type,
		props:{
			...props,
			children:children.map(child=>{
				return typeof child === 'object'?child:createTextVDom(child)
			})
		}
	}
}

// 调用render只是做初始化工作
function render(vDom,container){
	workInProgressRoot = {
		dom:container,
		props:{
			children:[vDom]
		},
		alternate:currentRoot
	}
	deletions = []
	nextUnitOfWork = workInProgressRoot
}

// 利用浏览器的闲暇时间进行执行渲染render任务
// workLoop,会不断的在空闲时间调用，进行渲染的执行
requestIdleCallback(workLoop)

// 用来调度任务
function workloop(deadline){
	while(nextUnitOfWork && dealine.timeRemaining>1){
		nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
	}
	if(!nextUnitOfWork && workInProgressRoot){
		// 当没有下一个任务，那么就进行统一的提交渲染
		commitRoot()
	}

	requestIdleCallback(workloop)

}

// performUnitOfWork用来执行任务，参数是我们当前的fiber,返回值就是下一个任务
function performUnitOfWork(fiber){
	// 检测函数组件
	const isFunctionComponent = fiber.type instanceof Function;
	// 判断是否是函数组件，如果是函数组件，就按照函数组件进行更新
	if(isFunctionComponent){
		updateFunctionComponent(fiber)
	}else{
		// 否则按照元素节点更新
		updateHostComponent(fiber)
	}

	// 这个函数的返回值是下一个任务，这是树结构，深度优先遍历
	// 先找子元素，没有子元素，在找兄弟元素
	// 如果兄弟元素也没有，那么就返回找父元素
	// 在找父元素的兄弟元素
	// 最后又回到根节点结束
	if(fiber.child){
		return fiber.child
	}
	let nextFiber = fiber
	while(nextFiber){
		// 判断当前节点是否有兄弟节点
		if(nextFiber.sibling){
			return nextFiber.sibling
		}
		// 如果没有兄弟节点，就返回至父元素
		nextFiber = nextFiber.return
	}
	// return
}

// 设置函数组件的更新的操作
function updateFunctionComponent(fiber){
	wipFiber = fiber;
	// 数据要使用hook
	hookIndex = 0;
	// hooks用来存储具体的state序列
	wipFiber.hooks =[]
	// 函数组件，type就是咱们的函数，通过函数调用，获取dom元素
	const children = [fiber.type(fiber.props)]

	// 执行调和子元素
	reconcileChildren(fiber,child)
}

// 将元素dom进行更新渲染
function updateHostComponent(fiber){
	if(!fiber.dom){
		fiber.dom =createDom(fiber)
	}
	// 将vdom结构转化为fiber结构
	const elements = fiber.props && fiber.props.children;
	// 执行调和子元素
	reconcileChildren(fiber,child)
}

function reconcileChildren(){
// 
}

function useState(){

}

// 类组件

export default {
	createElement,
	render,
	// useState,
	// Component,
	// tansfer
}